<template>
    <div class="ivu-pt-16">
        <Card :bordered="false" dis-hover>
            <Row>
                <Col span="6">
                <div class="title no-right">
                    客服手机列表({{ wechattotal }})
                </div>
                <div class="content-container no-right">
                    <div style="height: 100%; position: relative;">
                        <div v-for="item in wechatlist" :class="
                            params.wechat_id === item.wechatid
                                ? 'active'
                                : ''
                        " :key="item.wechatid" @click="getwechatcontact(item.wechatid, true)">
                            <div class="ivu-mb-16 ivu-p-8" style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    ">
                                <div class="ivu-mr-8" v-width="40">
                                    <Avatar size="large" :src="item.avatar || baseImg" ></Avatar>
                                </div>
                                <div class="ivu-mr-8" style="flex: 1;">
                                    <h3>
                                        {{ item.wechatnick }}
                                    </h3>
                                    <p v-font="12" v-color="'#888'">
                                        {{ item.wechatno }}
                                        <span v-if="item.nickname">({{item.nickname}})</span>
                                    </p>
                                </div>
                                <div v-width="60">
                                    <Badge :status="
                                        +item.isonline === 0
                                            ? 'success'
                                            : 'default'
                                    " :text="item.isonline_str" ></Badge>
                                </div>
                            </div>
                        </div>
                        <Spin size="large" fix v-if="wechatShow"></Spin>
                    </div>
                </div>
                </Col>
                <Col span="5">
                <div class="title no-right" style="display: flex;justify-content: space-between;">
                    <span>通讯录({{ wechatcontacttotal }})
                        <Icon v-if="params.wechat_id==''" class="ivu-ml-8 " type="md-sync"  size="18"></Icon>
                        <Icon v-else @click="changeupdate(params.wechat_id)" class="ivu-ml-8 icon" type="md-sync" color="#19be6b" size="18"></Icon>
                    </span>
                    <span><Checkbox :disabled="params.wechat_id==''" v-model="params.is_reply" @on-change="getwechatcontact(params.wechat_id)">未回复</Checkbox></span>
                </div>
                <div class="content-container no-right" style="display: flex; flex-direction: column;"
                     v-if="params.wechat_id">
                    <Input class="ivu-mb-8" clearable v-model="params.keywords" placeholder="请输入微信号或昵称"
                           @on-enter="getwechatcontact(params.wechat_id)" @on-clear="getwechatcontact(params.wechat_id)" ></Input>
                    <div style="flex: 1; position: relative;">
                        <template v-for="(item, index) in wechatcontactlist">
                            <div class="ivu-p-8" :key="item.value" :class="name === item.value ? 'active' : ''"
                                 @click="simulationfun(item, index)">
                                <Row type="flex" align="middle" justify="space-between">
                                    <Col>
                                    <strong>{{ item.value }}（{{
                                        item.total
                                    }}）</strong>
                                    </Col>
                                    <Col>
                                    <strong v-if="item.total > 0">
                                        <Icon type="ios-arrow-down" v-if="
                                            name === item.value
                                        " ></Icon>
                                        <Icon type="ios-arrow-forward" v-else ></Icon>
                                    </strong>
                                    </Col>
                                </Row>
                            </div>
                            <simulationlist :key="index" :data="item" :name="name" :showRepair="true" @clickwx="getwechatmessages"  @clickup="changeupdata" :ref="`simulation${index}`" ></simulationlist>
                        </template>
                    </div>
                </div>
                <div class="content-container no-right" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        " v-else>
                    <font color="#999">请选择客服手机</font>
                </div>

                <Spin size="large" fix v-if="wechatcontactShow"></Spin>
                </Col>
                <Col span="13">
                <div class="title">聊天记录({{ wechatmessagetotal }})</div>
                <div class="wxkeywords ivu-p-8">
                    <Row type="flex" align="middle" justify="space-between">
                        <Col style="display: flex; align-item: center;">
                        <strong class="ivu-mr-8">
                            <Ellipsis v-if="friendinfo.nickname" :text="friendinfo.nickname" :length="10" tooltip ></Ellipsis>
                        </strong>
                        <span class="ivu-mr-8">{{
                            friendinfo.friend_wechatno
                        }}</span>
                        <span class="ivu-mr-8">{{
                            friendinfo.gender_str
                        }}</span>
                        <span class="ivu-mr-8">{{
                            friendinfo.province
                        }}</span>
                        <span class="ivu-mr-8">{{
                            friendinfo.remark_name
                        }}</span>
                        </Col>
                        <Col style="display: flex; align-item: center;">
                        <div v-if="+patientinfo.id !== 0" @click="gotopatient({id:patientinfo.id})">
                            <span class="ivu-mr-8" style="cursor:pointer;color:#2b85e4">{{
                                patientinfo.user_name
                            }}</span>
                            <span class="ivu-mr-8" style="cursor:pointer;color:#2b85e4">{{
                                patientinfo.gender_str
                            }}</span>
                            <span style="cursor:pointer;color:#2b85e4" class="ivu-mr-8" v-if="
                                patientinfo.age &&
                                    patientinfo.age !== ''
                            ">{{ patientinfo.age }}岁</span>
                            <span class="ivu-mr-8">
                                <Tag v-if="
                                    patientinfo.status_name ===
                                        '初诊'
                                " color="blue">{{ patientinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    patientinfo.status_name ===
                                        '复诊'
                                " color="volcano">{{ patientinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    patientinfo.status_name ===
                                        '流失'
                                " color="cyan">{{ patientinfo.status_name }}</Tag>
                                <Tag v-else-if="
                                    patientinfo.status_name ===
                                        '断诊'
                                " color="green">{{ patientinfo.status_name }}</Tag>
                                <Tag v-else-if="patientinfo.status_name" color="orange">{{ patientinfo.status_name }}
                                </Tag>
                            </span>
                        </div>
                        </Col>
                    </Row>

                </div>
                <div class="content-container content-containers">
                    <chatDetail :paramsrecord="params1" ref="liaotian" @total="
                        (e) => {
                            wechatmessagetotal = e;
                        }
                    " @clickkeyword="getfriendinfo" ></chatDetail>
                </div>
                </Col>
            </Row>
        </Card>

        <Modal
            v-model="modal"
            draggable
            footer-hide>
            <p style="text-align: center;font-size:16px">通讯录正在同步，2分钟后请重新刷新该页面</p>
        </Modal>
        <Modal
            v-model="modalStatus"
            draggable
            footer-hide>
            <p style="text-align: center;font-size:16px">聊天记录正在同步，请稍候重新点击查看（约3-5分钟后）</p>
        </Modal>

        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"  >
            <detailDrawer :editType="2" v-if="patientId&&showTetailDrawer" :patientId="patientId">
            </detailDrawer>
        </Drawer>
    </div>
</template>
<script>
    import {
        customerwechatlist,
        customerwechatcontactlist,
        wechatfriendQueue,
        wechatmessageQueue
    } from '@/api/robot.js';
    import chatDetail from './chatrecord';
    import simulationlist from './simulationlist';
    import detailDrawer from '@/pages/home/patient/patient-detail/index.vue'
    // import simulationlist from "./simulationlists";
    export default {
        name: 'chatRecord',
        components: { chatDetail, simulationlist, detailDrawer },
        data () {
            return {
                showTetailDrawer: false,
                btnShow: [
                    {
                        name: 'patient-index-sub5',
                        flag: 'v1/patient/index/sub'
                    },
                    {
                        name: 'patient-index-edit-remark5',
                        flag: 'v1/patient/index/edit-remark'
                    },
                    {
                        name: 'v1-patient-index-update',
                        flag: 'v1/patient/index/update'
                    },
                    {
                        name: 'patient-callback-callback-common-list4',
                        flag: 'v1/patient/callback/callback-common-list'
                    },
                    {
                        name: 'patient-index-edit-tags10',
                        flag: 'v1/patient/index/edit-tags'
                    },
                    {
                        name: 'patient-index-edit-tags13',
                        flag: 'v1/patient/index/edit-tags'
                    }
                ],
                baseImg: require('@/assets/images/avater.png'),
                friendinfo: {},
                patientinfo: {},
                patientId: '',
                name: '',
                wechatlist: [],
                wechattotal: 0,
                wechatcontactlist: [],
                wechatcontacttotal: 0,
                wechatmessagelist: [],
                wechatmessagetotal: 0,
                loading: false,
                loadingwechatcontact: false,
                params: { wechat_id: '', keywords: '', is_reply: false },
                keywords: '',
                wechatShow: false,
                wechatcontactShow: false,
                params1: { wechat_id: '', friend_id: '', keywords: '', id: '' },
                modal: false,
                modalStatus: false,
                state: true,
                timeStatus: true,
                temporaryData: []
            };
        },
        /* 挂载完成能访问DOM元素 */
        mounted () {
            this.initial();
        },
        methods: {
            gotopatient (row) {
                // this.$refs.patientDetail.handleOpen(row);
                this.patientId = row.id
                this.showTetailDrawer = true
            },
            /* @函数功能: 初始化 */
            initial () {
                this.getwechat();
            },
            getwechat () {
                this.wechatShow = true;
                customerwechatlist().then(res => {
                    this.wechatShow = false;
                    if (res.list.length > 0) {
                        this.wechatlist = res.list;
                        this.wechattotal = res.total;
                        this.askData();
                    }
                });
            },
            askDataing () {
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatacancel();
                    this.$refs.liaotian.askData('end');
                });
            },
            askData () {
                this.wechatcontactlist = [];
                this.wechatcontacttotal = 0;
                this.wechatmessagelist = [];
                this.wechatmessagetotal = 0;
            },
            getwechatcontact (wechat_id, bool) {
                if (this.wechatcontactShow) {
                    this.$Message.error('数据加载中，请勿重复点击');
                    return;
                }
                if (bool) this.params.is_reply = false;
                this.wechatcontactShow = true;
                this.wechatcontactlist = [];
                this.name = undefined;
                this.friendinfo = {};
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatacancel();
                });
                this.params.wechat_id = wechat_id;
                let params = {
                    wechat_id: this.params.wechat_id,
                    keywords: this.params.keywords,
                    is_reply: this.params.is_reply ? 1 : 0
                };
                customerwechatcontactlist(params).then(res => {
                    this.wechatmessagetotal = 0;
                    this.wechatcontactShow = false;
                    if (res.list.length > 0) {
                        this.wechatcontactlist = res.list;
                        console.log(this.wechatcontactlist, 'this.wechatcontactlist')
                        this.wechatcontacttotal = res.total;
                    }
                });
            },
            getwechatmessages (item) {
                this.params1.id = item.id;
                this.params1.wechat_id = item.wechatid;
                this.params1.friend_id = item.friendid;
                this.$nextTick(() => {
                    this.$refs.liaotian.askDatacancel();
                    this.$refs.liaotian.askData('end');
                });
            },
            changeupdata (item) {
                this.temporaryData.forEach(element => {
                    if (element.friendid === item.friendid && element.wechatid === item.wechatid) {
                        // element.timeStatus = false;
                        const params = {
                            type: 3,
                            wechatid: item.wechatid,
                            friendid: item.friendid
                        };
                        if (element.timeStatus) {
                            wechatmessageQueue(params).then(res => {
                                this.modalStatus = true;
                                element.timeStatus = false;
                                setTimeout(() => {
                                    element.timeStatus = true;
                                }, 180000);
                            }).catch(() => {
                                this.modalStatus = false;
                                element.timeStatus = false;
                                setTimeout(() => {
                                    element.timeStatus = true;
                                }, 180000);
                            });
                        } else {

                        }
                    }
                });
                // console.log(item, '111');
                // this.timeStatus = true
                // console.log(this.timeStatus)
                // if (this.timeStatus) {
                //     this.timeStatus = false;
                //     const params = {
                //         type: 3,
                //         wechatid: item.wechatid,
                //         friendid: item.friendid
                //     };
                //     wechatmessageQueue(params).then(res => {
                //         this.modalStatus = true;
                //         setTimeout(() => {
                //             this.timeStatus = true;
                //         }, 180000);
                //     }).catch(() => {
                //         this.modalStatus = false;
                //     });
                // }
            },
            simulationfun (data, index) {
                console.log(data, 'data')
                this.temporaryData = data.child.map(item => ({
                    ...item, timeStatus: true
                }))
                if (+data.total === 0) return;
                if (this.name === data.value) this.name = undefined;
                else this.name = data.value;
            },
            getfriendinfo (e) {
                this.friendinfo = e.friend_info;
                this.patientinfo = e.patient_info;
            },
            // 更新数据
            changeupdate (val) {
                if (this.state) {
                    this.state = false;
                    wechatfriendQueue({ wechatid: val }).then(res => {
                        this.modal = true;
                        setTimeout(() => {
                            this.state = true;
                        }, 180000);
                    }).catch(() => {
                        this.modal = false;
                    });
                }
            }
        }
    };
</script>
<style lang="less" scoped>
    .content-container {
        padding: 16px;
        height: 655px;
        // height: 700px;
        border: 1px solid #ccc;
        overflow: auto;

        h3 {
            font-size: 14px;
        }

        .active {
            background: #e2e2e2;
        }

        .wechat-item {
            cursor: pointer;
        }

        .no-result {
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            font-weight: bold;
        }
    }

    .content-containers {
        height: 605px;
        // height: 650px;
    }

    .wxkeywords {
        height: 50px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .title {
        padding: 10px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .serach {
        width: 260px;
        margin-top: -5px;
    }

    .no-right {
        border-right: 0;
    }

    .search-icon {
        cursor: pointer;
    }
    .icon{
        cursor: pointer;
    }
</style>
